import React, {useState, useRef} from 'react';
import { history } from 'umi'
import { List,Tabs } from 'antd-mobile'
import { ListView} from '@/components'
import { questionErrorList,getWrongBook } from '@/services/edu'
import style from './index.less'


const ListItem = (props) => {
  return (
    
  //   <List.Item wrap className={style.listItem} thumb={props.status?<Icon type="check-circle"/>:<Icon type="cross-circle-o"/>} arrow="horizontal" multipleLine onClick={() => {history.push('/answer')}}>
  //   {props.title} 
  // </List.Item>
  <List.Item className={style.listItem} thumb={<div>{props.wrongNum||1}<br/>次</div>} arrow="horizontal" multipleLine onClick={() => {history.push(`/history/analysis?isError=1&type=${props.type}&itemOrder=${props.itemOrder}&sectionId=${props.sectionId}&chapterId=${props.chapterId}`)}}>
  {props.shortTitle} 
</List.Item>
  );
};
function History() {
  const params = useRef<any>({ rflag: 0 });
  const { query = {} } = history.location as any;
  const { chapterId,sectionId,subjectId } = query;
  const [type,setType] = useState(0);
  const listViewRef = useRef<any>();
  const handleTabChange = (v,r)=>{
    setType(r)
  }
  const getData = async (pageNum, pageSize) => {
    const payload:any = {
      pageIndex:pageNum,
      pageSize:20,
      type
    };
    if(subjectId){
      payload.subjectId=subjectId
    } else if(chapterId){
      payload.chapterId=chapterId
    }else{
      payload.sectionId=sectionId
    }
    const res = await getWrongBook(payload);
    const {
      list=[]
    }= res.response
    
    if(list.length){
      return list.map((item,i)=>{
        return {
          ...item,
          type,
          itemOrder:i,
          content:item.userCorrect,
          // chapterId:payload.chapterId,
          // sectionId:payload.sectionId
        }
      })
    }
  };
  const row = (item) => {
    return <ListItem {...item} key={item.id} />;
  };
  const tabs = [
    { title: '全部',key:'0'},
    { title: '错一次',key:'1' },
    { title: '错两次',key:'2' },
    { title: '错三次',key:'3' },
    { title: '四次以上',key:'4' },
    // { title: '6th Tab' },
    // { title: '7th Tab' },
    // { title: '8th Tab' },
    // { title: '9th Tab' },
  ];
  const renderContent =(data)=>{
    return <div className={style.listWrpper}>
    <ListView ref={listViewRef} getData={getData} renderRow={row} />
  </div>
  }
  return (
    <div className={style.error}>
      <Tabs initialPage={0} onChange={handleTabChange} tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={5} />}>
      
      </Tabs>
      <div key={type} className={style.listWrpper}>
    <ListView ref={listViewRef} getData={getData} renderRow={row} />
  </div>
      
      
      
    </div>
  );
}

export default History;
